<template>
  <div class="guanli">
    <GongYong></GongYong>
    <main>
      <div class="content">
        <div class="dindan">
          <div class="left">
            <el-select v-model="value" placeholder="订单号">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </div>
          <div class="right">
            <template>
              <el-time-select
                placeholder="起始时间"
                v-model="startTime"
                :picker-options="{
                  start: '08:30',
                  step: '00:15',
                  end: '18:30',
                }"
              ></el-time-select>至
              <el-time-select
                placeholder="截止时间"
                v-model="endTime"
                :picker-options="{
                  start: '08:30',
                  step: '00:15',
                  end: '18:30',
                  minTime: startTime,
                }"
              ></el-time-select>
            </template>
            <p>
              <span>退款状态</span>
              <el-select v-model="value" placeholder="退款中">
                <el-option
                  v-for="item in tuikuanxuanzhe"
                  :key="item.value"
                  :label="item.label"
                  :value="item.values"
                ></el-option>
              </el-select>
            </p>
          </div>
        </div>
        <div class="top">
          <p>
            <span>订单状态:</span>
            <el-select v-model="valuese" placeholder="请选择">
              <el-option
                v-for="item in zaixuanzhe"
                :key="item.valuese"
                :label="item.label"
                :value="item.valuese"
              ></el-option>
            </el-select>
          </p>
          <p>
            <span>用户ID:</span>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </p>
          <p>
            <span>商品名称:</span>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </p>
          <p>
            <span>自提点:</span>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
            <el-button type="info">选择</el-button>
          </p>
        </div>
      </div>
      <el-button type="primary">搜索</el-button>
      <div class="tabg">
        <el-tabs v-model="activeName">
          <el-tab-pane label="全部" name="first">
            <el-table :data="list.slice((currentPage - 1) * pagesize, currentPage * pagesize)" border show-overflow-tooltip>
              <el-table-column prop="id" label="ID" width="50"></el-table-column>
              <el-table-column prop="title" label="商家信息" show-overflow-tooltip></el-table-column>
              <el-table-column prop="word" label="买家信息"></el-table-column>
               <el-table-column prop="title" label="送货方式" show-overflow-tooltip></el-table-column>
              <el-table-column prop="price" label="支付金额" show-overflow-tooltip></el-table-column>
              <el-table-column prop="word" label="状态"></el-table-column>
               <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="edit(scope.row, tableData)"
                type="text"
                size="small"
              >发货</el-button>
              <el-button @click.native.prevent="deletae(scope.row.id)" type="text" size="small">点我这</el-button>
              <el-button @click.native.prevent="deletae(scope.row.id)" type="text" size="small">备注</el-button>
              <el-button @click.native.prevent="deletae(scope.row.id)" type="text" size="small">一键退货</el-button>
              <el-button @click.native.prevent="deletae(scope.row.id)" type="text" size="small">修改自提点</el-button>
            </template>
          </el-table-column>
            </el-table>
             <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="list.length"
        ></el-pagination>
          </el-tab-pane>
          <el-tab-pane label="代付款" name="second">代付款</el-tab-pane>
          <el-tab-pane label="代发货" name="third">代发货</el-tab-pane>
          <el-tab-pane label="已发货" name="fourth">已发货</el-tab-pane>
          <el-tab-pane label="已完成" name="yiwancheng">已完成</el-tab-pane>
          <el-tab-pane label="退款中" name="tuikuanzhong">退款中</el-tab-pane>
          <el-tab-pane label="关闭" name="guanbi">关闭</el-tab-pane>
        </el-tabs>
      </div>
    </main>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import GongYong from "../shangpin/gongyong";
export default {
  name: "Guanli",
  components: {
    GongYong,
  },
  data() {
    return {
      options: [
        { value: "选项1", label: "订单号", }, {
          value: "选项2", label: "买家姓名",
        }, {
          value: "选项3", label: "卖家姓名",
        },
      ],
      tuikuanxuanzhe: [
        { value: "选项1", label: "未选择", }, {
          value: "选项2", label: "退款中",
        }, {
          value: "选项3", label: "同意退款",
        }, {
          value: "选项4", label: "拒绝退款",
        },
      ],
      zaixuanzhe: [
        { value: "选项1", label: "未选定" }, {
          value: "选项2", label: "代付款"
        }, {
          value: "选项3", label: "代发货"
        }, {
          value: "选项4", label: "已取消"
        }, {
          value: "选项5", label: "已发货"
        }, {
          value: "选项6", label: "已退款"
        }, {
          value: "选项7", label: "退款中"
        }, {
          value: "选项8", label: "评价中"
        }, {
          value: "选项9", label: "已完成评价"
        }, {
          value: "选项10", label: "一件退款"
        }
      ],
      valuese: "",
      values: "",
      value: "", //选这款
      input: "", //搜索框
      startTime: "", //起始时间
      endTime: "", //结束时间
      activeName: 'first',
       total: 2, //总页
      currentPage: 1, //初始页
      pagesize: 4, //每页数据
     
    };
  },
  created() {
    this.GetList();
  },
  methods: {
    ...mapActions(["GetList"]),
      handleSizeChange: function (size) {
      this.pagesize = size;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },
  },
  computed: {
    ...mapState(["list"]),
  },
};
</script>

<style scoped lang="scss">
.guanli {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
  background: #efefef;
}
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.dindan {
  width: 100%;
  display: flex;
  padding: 10px 0;
  .left,
  .right {
    display: flex;
    align-items: center;
    padding: 0 20px;
  }
  p {
    padding: 0 10px;
  }
}
.top {
  width: 100%;
  display: flex;
  padding: 10px 0;
  p {
    width: 30%;
    display: flex;
    padding: 0 20px;
    align-items: center;
    span {
      width: 70px;
    }
  }
}
.tabg {
  background: #fff;
}
</style>